<!DOCTYPE html>
<html lang="en">

<head>
    <#include "/lx/admin/components/meta.html" />
    <title>英国大学详情 ${metaTitleSuffix!}</title>
    <#include "/lx/admin/components/stylesheets.html" />
</head>

<body>
    <div id="app">
        <el-container>
            <#assign menuIndex="3-1" />
            <#include "/lx/admin/components/menu.html" />
            <el-container>
                <#include "/lx/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-form ref="form" :model="info" label-width="100px">
                            <el-form-item label="名称">
                                <el-input v-model="info.name" placeholder="请输入名称"></el-input>
                            </el-form-item>
                            <el-form-item label="英文名">
                                <el-input v-model="info.engName" placeholder="请输入英文名"></el-input>
                            </el-form-item>
                            <el-form-item label="封面">
                                <!-- <el-upload class="avatar-uploader" :on-success="handleCoverSuccess" :http-request='onUploadSMImage' list-type='picture' :show-file-list="false"> -->
                                <el-upload class="avatar-uploader" :on-success="handleCoverSuccess" :http-request='uploadQnFile' list-type='picture' :show-file-list="false">
                                    <img v-if="coverUrl" :src="coverUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="LOGO">
                                <!-- <el-upload class="avatar-uploader" :on-success="handleLogoSuccess" :http-request='onUploadSMImage' list-type='picture' :show-file-list="false"> -->
                                <el-upload class="avatar-uploader" :on-success="handleLogoSuccess" :http-request='uploadQnFile' list-type='picture' :show-file-list="false">
                                    <img v-if="logoUrl" :src="logoUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="详情页图片">
                                <!-- <el-upload class="avatar-uploader" :on-success="handleImageSuccess" :http-request='onUploadSMImage' list-type='picture' :show-file-list="false"> -->
                                <!-- <el-upload class="avatar-uploader" :on-success="handleImageSuccess" :http-request='uploadQnFile' list-type='picture' :show-file-list="false">
                                    <img v-if="info.image" :src="info.image" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload> -->
                                <el-upload class="upload-demo" :http-request='uploadQnFile' :on-success='successImg' :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture-card">
                                    <el-button size="small" type="primary">选择文件</el-button>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="视频URL">
                                <el-input v-model="info.video" placeholder="请输入保利威视视频URL"></el-input>
                            </el-form-item>
                            <el-form-item label="排序">
                                <el-input v-model="ukSchool.sort" type="number" placeholder="请输入排序"></el-input>
                            </el-form-item>
                            <el-form-item label="介绍">
                                <el-input v-model="info.intro" type="textarea" :rows="5" placeholder="请输入简介"></el-input>
                            </el-form-item>
                            <el-form-item label="申请时间">
                                <el-input v-model="info.appleTime" placeholder="请输入申请时间"></el-input>
                            </el-form-item>
                            <el-form-item label="学费 / 年">
                                <el-input v-model="info.fee" placeholder="请输入学费 / 年"></el-input>
                            </el-form-item>
                            <el-form-item label="所在城市">
                                <el-input v-model="info.city" placeholder="请输入所在城市"></el-input>
                            </el-form-item>
                            <el-form-item label="师生比例">
                                <el-input v-model="info.teacherRate" placeholder="请输入师生比例"></el-input>
                            </el-form-item>
                            <el-form-item label="男女比例">
                                <el-input v-model="info.sexRate" placeholder="请输入男女比例"></el-input>
                            </el-form-item>
                            <el-form-item label="国际生比例">
                                <el-input v-model="info.internationalStudentRate" placeholder="请输入国际学生比例"></el-input>
                            </el-form-item>
                            <el-form-item label="优势专业" v-if="info.id">
                                <el-table :data="majorList">
                                    <el-table-column prop="name" label="专业名称"></el-table-column>
                                    <el-table-column prop="englishName" label="英文名"></el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button type="text" @click="delMajor(scope.row)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div style="margin-top: 10px;">
                                    <el-select v-model="majorIndexToAdd" filterable clearable placeholder="请选择专业">
                                        <el-option v-for="(item, index) in majors" :key="item.id" :label="item.name" :value="index"></el-option>
                                    </el-select>
                                    <el-button @click="addMajor" :disabled="majorIndexToAdd === ''"><i class="el-icon-plus"></i>添加</el-button>
                                </div>
                            </el-form-item>
                            <el-form-item label="数据来源">
                                <el-input v-model="info.dataFrom" placeholder="请输入数据来源"></el-input>
                            </el-form-item>
                            <div class="block-title">大学排名</div>
                            <div style="margin-bottom: 10px;">
                                <el-input v-model="ranking[0].field" style="width: 220px;"></el-input>
                                <el-input v-model="ranking[0].value" style="width: 220px;"></el-input>
                            </div>
                            <div style="margin-bottom: 10px;">
                                <el-input v-model="ranking[1].field" style="width: 220px;"></el-input>
                                <el-input v-model="ranking[1].value" style="width: 220px;"></el-input>
                            </div>
                            <div style="margin-bottom: 10px;">
                                <el-input v-model="ranking[2].field" style="width: 220px;"></el-input>
                                <el-input v-model="ranking[2].value" style="width: 220px;"></el-input>
                            </div>
                            <div style="margin-bottom: 10px;">
                                <el-input v-model="ranking[3].field" style="width: 220px;"></el-input>
                                <el-input v-model="ranking[3].value" style="width: 220px;"></el-input>
                            </div>
                            <!-- <el-form-item label="QS排名">
                                <el-input v-model="ranking.qs" placeholder="请输入QS排名"></el-input>
                            </el-form-item>
                            <el-form-item label="Times排名">
                                <el-input v-model="ranking.times" placeholder="请输入Times排名"></el-input>
                            </el-form-item>
                            <el-form-item label="CUG排名">
                                <el-input v-model="ranking.cug" placeholder="请输入CUG排名"></el-input>
                            </el-form-item>
                            <el-form-item label="REF排名">
                                <el-input v-model="ranking.ref" placeholder="请输入REF排名"></el-input>
                            </el-form-item> -->
                            <div class="block-title">本科预科申请要求</div>
                            <el-form-item label="雅思">
                                <el-input v-model="requirement[0].ielts" placeholder="请输入雅思要求"></el-input>
                            </el-form-item>
                            <el-form-item label="学术背景">
                                <el-input v-model="requirement[0].background" placeholder="请输入学术背景"></el-input>
                            </el-form-item>
                            <el-form-item label="其他">
                                <el-input v-model="requirement[0].other" placeholder="请输入其他要求"></el-input>
                            </el-form-item>
                            <div class="block-title">本科申请要求</div>
                            <el-form-item label="雅思">
                                <el-input v-model="requirement[1].ielts" placeholder="请输入雅思要求"></el-input>
                            </el-form-item>
                            <el-form-item label="学术背景">
                                <el-input v-model="requirement[1].background" placeholder="请输入学术背景"></el-input>
                            </el-form-item>
                            <el-form-item label="其他">
                                <el-input v-model="requirement[1].other" placeholder="请输入其他要求"></el-input>
                            </el-form-item>
                            <div class="block-title">硕士申请要求</div>
                            <el-form-item label="雅思">
                                <el-input v-model="requirement[2].ielts" placeholder="请输入雅思要求"></el-input>
                            </el-form-item>
                            <el-form-item label="学术背景">
                                <el-input v-model="requirement[2].background" placeholder="请输入学术背景"></el-input>
                            </el-form-item>
                            <el-form-item label="其他">
                                <el-input v-model="requirement[2].other" placeholder="请输入其他要求"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submit">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/lx/admin/components/footer.html" />
    </div>
    <#include "/lx/admin/components/scripts.html" />
    <#include "/lx/admin/components/qiniu.html" />
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                info: {},
                ukSchool: {},
                coverUrl: '',
                logoUrl: '',
                fileList: [],
                ranking: [{
                    field: '',
                    value: ''
                }, {
                    field: '',
                    value: ''
                }, {
                    field: '',
                    value: ''
                }, {
                    field: '',
                    value: ''
                }],
                majors: [],
                majorIndexToAdd: '',
                majorList: [],
                requirement: [{
                    ielts: '',
                    background: '',
                    other: ''
                }, {
                    ielts: '',
                    background: '',
                    other: ''
                }, {
                    ielts: '',
                    background: '',
                    other: ''
                }]
            }
        },
        watch: {

        },
        mounted: function() {
            this.ukSchool = ${ukSchool!'{}'}
            this.info = ${school!'{}'}
            this.majors = ${majors!'[]'}

            if (this.info.cover) {
                this.coverUrl = this.info.cover;
            }
            if (this.info.logo) {
                this.logoUrl = this.info.logo;
            }
            if (this.info.images) {
                var images = this.info.images.split(';');
                images.pop();
                for (var i = 0; i < images.length; i ++) {
                    var filename = images[i].substring(images[i].lastIndexOf('/') + 1, images[i].indexOf('?') > 0 ? images[i].indexOf('?') : images[i].length );
                    var image = {
                      name: filename,
                      url: images[i]
                    }
                    this.fileList.push(image);
                }
            }
            if (this.info.rates) {
                this.ranking = JSON.parse(this.info.rates);
            }
            if (this.info.advantageMajors) {
                var advantageMajorList = this.info.advantageMajors.split(";");
                for (var i = 0; i < advantageMajorList.length; i ++) {
                    for (var j = 0; j < this.majors.length; j ++) {
                        if (Number(advantageMajorList[i]) == this.majors[j].id) {
                            this.majorList.push(this.majors[j]);
                        }
                    }
                }
            }
            if (this.info.requirement) {
                this.requirement = JSON.parse(this.info.requirement);
            }
        },
        methods: {
            submit() {
                var self = this;
                if (!self.info.name) {
                    msg("请输入大学名称");
                    return;
                }
                if (!self.info.engName) {
                    msg("请输入英文名");
                    return;
                }
                var images = '';
                for (var i = 0; i < self.fileList.length; i ++) {
                    images += self.fileList[i].url + ";";
                }
                // if (!images) {
                //     msg("请上传详情页图片");
                //     return;
                // }

                var rates = JSON.stringify(this.ranking);
                var advantageMajors = '';
                for (var i = 0; i < self.majorList.length; i ++) {
                    advantageMajors += self.majorList[i].id + ";";
                }
                var requirement = JSON.stringify(this.requirement);

                var url = "/lx/admin/school/submit"
                var param = {
                    id: self.info.id,
                    name: self.info.name,
                    engName: self.info.engName,
                    cover: self.coverUrl,
                    logo: self.logoUrl,
                    images: images,
                    video: self.info.video,
                    intro: self.info.intro,
                    appleTime: self.info.appleTime,
                    fee: self.info.fee,
                    city: self.info.city,
                    teacherRate: self.info.teacherRate,
                    sexRate: self.info.sexRate,
                    internationalStudentRate: self.info.internationalStudentRate,
                    rates: rates,
                    dataFrom: self.info.dataFrom,
                    advantageMajors: advantageMajors,
                    requirement: requirement,
                    sort: self.ukSchool.sort
                };
                console.log(param);
                var success = (response) => {
                    window.location.href = "/lx/admin/school/list";
                }
                var fail = (response) => {
                    msg(response.msg);
                }
                var complete = () => {}
                axiosRequestPro(url, param, success, fail, complete);
            },
            handleCoverSuccess(res, file) {
                console.log(res)
                this.coverUrl = res.data.url;
            },
            handleLogoSuccess(res, file) {
                console.log(res)
                this.logoUrl = res.data.url;
            },
            // handleImageSuccess(res, file) {
            //     console.log(res)
            //     this.info.image = res.data.url;
            // },
            successImg(response, file, fileList) {
                var image = {
                    name: file.name,
                    url: response.data.url
                }
                this.fileList.push(image);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
                this.fileList = fileList;
            },
            handlePreview(file) {
                console.log(file);
                var layerOption = {
                    "title": "查看大图", //相册标题
                    "id": 0, //相册id
                    "start": 0, //初始显示的图片序号，默认0
                    "data": [ //相册包含的图片，数组格式
                        {
                            "alt": file.name,
                            "pid": file.uid, //图片id
                            "src": file.url, //原图地址
                            "thumb": "" //缩略图地址
                        }
                    ]
                }
                layer.photos({
                    photos: layerOption,
                    anim: 6
                })
            },
            delMajor(item) {
                for (var i = 0; i < this.majorList.length; i ++) {
                    if (item.id == this.majorList[i].id) {
                        this.majorList.splice(i, 1);
                    }
                }
            },
            addMajor() {
                for (var i = 0; i < this.majorList.length; i ++) {
                    if (this.majors[this.majorIndexToAdd].id == this.majorList[i].id) {
                        return;
                    }
                }
                this.majorList.push(this.majors[this.majorIndexToAdd]);
                this.majorIndexToAdd = '';
            }
        }
    })
    </script>
    <style type="text/css">
    .title {
        font-size: 18px;
        font-weight: bold;
    }

    input[type="file"] {
        display: none !important;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .block-title {
        margin-bottom: 10px;
    }
    </style>
    <#include "/lx/admin/components/msg.html" />
</body>

</html>